<template>
	<view>
		<view class="index_recommend" >
			<view class="swiper" >
				<swiper autoplay circular indicator-dots>
					<swiper-item v-for="(item,index) in swiper_item"
					:key="index"
					>
						<image mode="widthFix" :src="item" />
					</swiper-item>
				</swiper>
			</view>
		</view>
		<view class="index_recommend_info">
			<view class="item u-f-ac">
				<view class="item_img">
					<image mode="widthFix" 
					style="width: 100%" 
					src="../../../static/icon/cm2_discover_icn_fm-ip6@2x.png" />
				</view>
				<view class="item_img" @tap="today">
						<view class="day u-f-ajc" >
							<text>{{day}}</text>
						</view>
				</view>   
				<view class="item_img" @tap="paihang">
					<image mode="widthFix" style="width: 100%"
					 src="../../../static/icon/cm2_discover_icn_upbill-ip6@2x.png" />
				</view> 
			</view>
			<view class="text">
				<text>私人MV</text>
				<text>每日歌曲推荐</text>
				<text>云音乐热歌榜</text>
			</view>
		</view>	
	</view>
</template>

<script>
	export default {
		data() {
			return {
				//轮播图
				swiper_item:[
					'../../../static/cm2_discover_banner_cn-ip6@2x.jpg',
					'../../../static/cm2_discover_banner_jp-ip6@2x.jpg',
					'../../../static/cm2_discover_banner_kr-ip6@2x.jpg',
					'../../../static/cm2_discover_banner_us-ip6@2x.jpg'
				],
				day:0,
			}
		},
		created() {
			this.getDay()
		},
		methods: {
			getDay(){
				let myDate = new Date();
				let day=myDate.getDate();
				this.day=day;
				uni.setStorageSync("day", day);  
			},
			today(){
				uni.navigateTo({
					url:'../daysong/daysong'
				})
			},
			paihang(){
				this.$emit('paihang')
			}
		}
	}
</script>

<style lang="less" scoped>
	//轮播图
		.index_recommend{
			width: 100%;
			.swiper{
				width: 100%;
				swiper{
					width: 750upx;
					height: 302upx;
					image{
						width: 100%;
					}
				}
			}
		}
		.index_recommend_info{
			padding-top: 30upx;
			width: 100%;
			.item{
				width: 100%;
				.item_img{
					flex: 1;
					margin:0 60upx 0 60upx;
					border: 1px solid red;
					border-radius:50%;
					width: 130upx;
					height: 130upx;
					.day{
						width: 130upx;
						height: 130upx;
						font-size: 50upx;
						color: red;         
					}
				}
			}
			.text{
				padding:20upx 0 20upx 0;
				width: 100%;
				display: flex;
				border-bottom: 1upx solid #f0f0f0;
				text{
					flex: 1;        
					font-size: 26upx;
					text-align: center;
				}
			}
		}
</style>
